<template>
  <el-tabs v-model="pubDriverRefer" type="card" @tab-click="handleClick">
    <el-tab-pane label="动因引用" name="first">
    <div>
    <el-button @click="refer()">查看</el-button>
    </div>
    <!--列表-->
    <div>
    <el-table ref="multipleTable"
                          :data="tableData"
                          stripe>
                    <el-table-column width="55"
                                     type="selection"
                                     ></el-table-column>
                    <el-table-column prop="driverCode"
                                     label="编码"
                                      show-overflow-tooltip
                                     v-if="columnState[0]">
                    </el-table-column>
                    <el-table-column prop="driverName"
                                     label="名称"
                                      show-overflow-tooltip
                                     v-if="columnState[1]">
                    </el-table-column>

                    <el-table-column prop="driverType"
                                     label="类型"
                                      show-overflow-tooltip
                                     v-if="columnState[2]">
                    </el-table-column>

                    <el-table-column prop="driverDesc"
                                     label="描述"
                                      show-overflow-tooltip
                                     v-if="columnState[3]">
                    </el-table-column>
    
    </el-table>

    </div>  
    </el-tab-pane>
  </el-tabs>
</template>
<script>
  export default {
    data() {
      return {
        textData: [
          { prop: "driverCode", label: "编码" },
          { prop: "driverName", label: "名称" },
          { prop: "driverType", label: "类型" },
          { prop: "driverDesc", label: "描述" },
      ], //双向绑定 选择表单展示字段
        checkList: [],
        pubDriverRefer: 'first',
        total: 0,
        tableData: [],
      };
     
    },
    created() {
    this.checkListInit();
    console.log(this.tableData, "模拟数据");
    },
    computed: {
    columnState() {
      let arr = [],
        arr1 = this.textData,
        arr2 = this.checkList;
      for (let i = 0; i < arr1.length; i++) {
        let flag = false;
        for (let j = 0; j < arr2.length; j++) {
          if (arr1[i].label == arr2[j]) {
            flag = true;
            break;
          }
        }
        arr.push(flag);
      }
      return arr;
    }
  },
    methods: {
      checkListInit() {
      this.checkList = this.textData.map(v => {
        return v.label;
      });
    },
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>

<style lang="scss" scoped>
</style>